<script setup lang="ts">
import { defineOptions } from "vue";

defineOptions({
  name: "xt-dialog",
});

interface PropType {
  appendToBody?: boolean;
  closeOnClickModal?: boolean;
}

withDefaults(defineProps<PropType>(), {
  appendToBody: true,
  closeOnClickModal: false,
});
</script>

<template>
  <el-dialog
    class="xt-dialog"
    :append-to-body="appendToBody"
    :close-on-click-modal="closeOnClickModal"
  >
    <template v-for="(_value, name) in $slots" #[name]="scope" :key="name">
      <slot :name="name" v-bind="scope || {}"></slot>
    </template>
  </el-dialog>
</template>

<style lang="scss">
.el-dialog {
  padding: 0px;
  &__header {
    padding: 20px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
  }

  &__body {
    padding: 20px;
  }

  &__footer {
    padding: 10px 20px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.1);
  }
}
</style>
